{% extends 'base.html' %}
{% block title %}About Me{% endblock %}
{% block content %}
<main class="container mx-auto px-4 py-8">
    <article class="p-6 rounded shadow">
        <header>
            <h1 class="text-xl font-semibold mb-4">{{ article.title }}</h1>
            <p class="text-gray-500 mb-2"><time datetime="{{ article.updated_at }}">{{ article.updated_at }}</time></p>
        </header>
        <section class="mt-4">
            <div class="markdown-body">
                {{ content |safe}}
            </div>
        </section>
        <footer class="mt-6">
            <!-- 这里可以添加一些文章的元数据，比如标签、评论数等 -->
            <div>Tags: {{ article.tags }}</div>
        </footer>
    </article>
</main>
<style>
    .markdown-body {
        font-family: Arial, sans-serif;
    }
/* 基本CSS文件 - 包含四级标题的样式 */

/* 一级标题样式 */
h1 {
/*    color: #FF5733; /* 橙红色 */*/
/*    font-size: 36px; /* 字体大小 */*/
    font-family: 'Arial', sans-serif; /* 字体 */
}

/* 二级标题样式 */
h2 {
    color: #33FF57; /* 绿色调 */
    font-size: 30px; /* 字体大小 */
    font-family: 'Times New Roman', serif; /* 字体 */
}

/* 三级标题样式 */
h3 {
    color: #5733FF; /* 紫色调 */
    font-size: 24px; /* 字体大小 */
    font-family: 'Courier New', monospace; /* 字体 */
}

/* 四级标题样式 */
h4 {
    color: #FF33C1; /* 粉红色 */
    font-size: 18px; /* 字体大小 */
    font-family: 'Georgia', serif; /* 字体 */
}

/* styles.css */
.markdown-body p {
/*  color: blue;*/
  font-size: 16px;
  text-align: justify;
  line-height: 1.6;
  margin: 8px 0;
white-space: pre-wrap;
}


</style>
{% endblock %}